<template>
	<!-- 专门写地图的组件 -->
	<view>
		<map id="mapId" class="mapsize" ref="mapId" :latitude="latitude" :longitude="longitude" :scale="scale" show-location
			:markers="markers"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				location: '',
				latitude: 0,
				longitude: 0,
				scale: 16,
				markers: [{
					id: 0,
					latitude: 0,
					longitude: 0
				}]
			}
		},
		created() {
			this.getLoaction()
		},
		methods: {
			getLoaction() {
				// 创造并返回map上下文mapContext对象
				// 第二个参数this是为了操作组件内的<map>组件
				let mapId = uni.createMapContext("mapId", this);
				let that = this;
				// console.log(mapId)
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res.longitude)
						console.log(res.latitude)
						// 内置地图
						// uni.openLocation({
						// 	latitude: res.latitude,
						// 	longitude: res.longitude,
						// 	success: function() {
						// 		console.log('success');
						// 	}
						// })
						// 将当前位置移动到地图中心 (要用户授权才可以使用这个函数)
						mapId.moveToLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success: (res1) => {
								console.log('success')
								that.markers.splice(0, 1);
								that.scale = 16;
								that.latitude = res.latitude;
								that.longitude = res.longitude;
								let oldmak = that.markers;
								that.markers = [{
									id: 0,
									latitude: res.latitude,
									longitude: res.longitude,
									//iconPath: '/static/img/location.png', 只能用相对路径
									width: 40,
									height: 40
								}, ...oldmak];
							}
						})
						// console.log(this.location)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.mapsize {
		height: 100vh;
		width: 100vh;
	}
</style>
